<template>
  <div id="distributionOrderItem">
    <div :class="{content:true,isLastItem:isLastItem}">
      <div class="leftDiv">
        <van-image :src="master.avatar" round width="3rem" height="3rem" ></van-image>
        <!--<div class="leftContentDiv">-->
        <!--<div class="name">{{master.nickName}}</div>-->
        <!--<van-rate value="4" class="rate" size="0.8rem" />-->
        <!--</div>-->

        <div class="leftContentDiv">
          <div class="name">{{ master.realName }}</div>
        </div>
      </div>

      <div>
        <van-button
          class="selectButton"
          @click="selectButtonClick"
          v-show="isSelect"
          >已分配</van-button
        >
        <van-button class="button" @click="buttonClick" v-show="!isSelect">
          选他</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { api_orderDispatch } from "@/service/api/repair";

export default {
  name: "DistributionOrderItem",
  methods: {
    selectButtonClick() {},
    buttonClick() {
      var data = {
        orderId: this.orderid,
        masterId: this.master.id
      };

      this.$toast.loading();

      api_orderDispatch(data)
        .then(res => {
          this.isSelect = true;
          this.$toast('分配成功');
          this.$router.back();
        })
        .catch(error => {
          this.$toast.clear();
        });
    }
  },
  props: {
    isSelect: Boolean,
    master: Object,
    orderid: String,
      isLastItem:Boolean
  }
};
</script>

<style scoped>
#distributionOrderItem {
  width: 100%;
  background-color: white;
}
.content {
  height: 100%;
  padding: 0.7rem 0;
  margin: 0 1rem;
  border-bottom: 0.5px solid #f0f1f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.isLastItem{
  border-bottom: 0px solid #f0f1f5;

}
.leftDiv {
  display: flex;
  margin-left: 0.2rem;
}
.leftContentDiv {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 0.9rem;

  justify-content: center;
}

.name {
  max-width: 10rem;
  height: 1.5rem;
  font-size: 0.95rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;

  overflow: hidden;
}
.rate {
}

.button {
  width: 5.2rem;
  height: 2.2666666666666666rem;
  border-radius: 1.1333333333333333rem;
  border: 1px solid rgba(191, 195, 205, 1);
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(122, 132, 145, 1);
  line-height: 2.2666666666666666rem;
}
.selectButton {
  width: 5.2rem;
  height: 2.2666666666666666rem;
  background: rgba(57, 123, 230, 1);
  border-radius: 1.1333333333333333rem;

  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 2.2666666666666666rem;
}
</style>
